<script setup lang="ts">
import {Group} from "three";

import {useSeek} from "@tresjs/core";

import {WallType} from "@/types/web3d";
import {ThemeVO} from "@/api/pb/theme";



const {seekByName} = useSeek()

const theme = inject<Ref<ThemeVO>>('theme')!
const wallDisabled = ref({})
// 墙体 Group
const wallGroup = inject<Group>('wallGroup')!

// 墙体展示
const wallShow = ref({
  bottom: 0,
  top: 1,
  left: 0,
  right: 0,
  front: 0,
  back: 0,
})
const changeWallShow = (type: WallType) => {
  const wall = seekByName(wallGroup, type)!
  wall.visible = wallShow.value[type] === 0
  wallDisabled.value[type] = wallShow.value[type] === 2
}

const init = () => {
  wallDisabled.value = theme.value.modelMeta?.wallDisabled as any
  if (!wallDisabled.value) {
    wallDisabled.value = theme.value.modelMeta!.wallDisabled = {}
  }
  Object.values(WallType).forEach(type => {
    wallShow.value[type] = wallDisabled.value[type] ?
      2 :
      type === 'top' ?
        1:
        0
    changeWallShow(type)
  })
}

onMounted(() => {
  init()
})

</script>

<template>
  <el-form>
    <el-form-item label="顶部">
      <el-radio-group v-model="wallShow.top" @change="changeWallShow(WallType.TOP)">
        <el-radio-button label="显示" :value="0" />
        <el-radio-button label="暂时隐藏" :value="1" />
        <el-radio-button label="禁用" :value="2" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="底部">
      <el-radio-group v-model="wallShow.bottom" @change="changeWallShow(WallType.BOTTOM)">
        <el-radio-button label="显示" :value="0" />
        <el-radio-button label="暂时隐藏" :value="1" />
        <el-radio-button label="禁用" :value="2" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="左侧">
      <el-radio-group v-model="wallShow.left" @change="changeWallShow(WallType.LEFT)">
        <el-radio-button label="显示" :value="0" />
        <el-radio-button label="暂时隐藏" :value="1" />
        <el-radio-button label="禁用" :value="2" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="右侧">
      <el-radio-group v-model="wallShow.right" @change="changeWallShow(WallType.RIGHT)">
        <el-radio-button label="显示" :value="0" />
        <el-radio-button label="暂时隐藏" :value="1" />
        <el-radio-button label="禁用" :value="2" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="前方">
      <el-radio-group v-model="wallShow.front" @change="changeWallShow(WallType.FRONT)">
        <el-radio-button label="显示" :value="0" />
        <el-radio-button label="暂时隐藏" :value="1" />
        <el-radio-button label="禁用" :value="2" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="后方">
      <el-radio-group v-model="wallShow.back" @change="changeWallShow(WallType.BACK)">
        <el-radio-button label="显示" :value="0" />
        <el-radio-button label="暂时隐藏" :value="1" />
        <el-radio-button label="禁用" :value="2" />
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
